<template>
    <div class="sory-bo animate__animated animate__fadeInUp animate__delay-0.5s">
       <div class="wh sory-bo-po">
            <div v-for="(i,$index) in arr2" :key="$index" class="sory-item clearfix">
                <div class="sory-it clearfix">
                    <div class="sory-lc">
                        <div class="sory-tit">{{i.title}}</div>
                        <p class="sory-text">{{i.text}}<br>{{i.text2}}<br>{{i.text3}}</p>
                    </div>
                    <div class="sory-rc">
                        <span>{{i.time1}}</span>
                        <span>{{i.time2}}</span>
                    </div>
                </div>
            </div>
            <div class="sory-bo-btn" @click="btn"><span></span></div>
       </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            arr:[
                {title:"新政府上台后韩国首都圈房地产价格上涨",text:"“我想当个设计师，首先是不是得创意好？”",text2:"“错，首先得身体好”",text3:"",time1:"06/01",time2:"2017"},
                {title:"前4月房地产投资继续增加",text:"客户：你看这个logo放大的同时能不能缩小一点",text2:'设计师：……你说啥？',text3:"",time1:"06/01",time2:"2017"},
                {title:"PMI连续10个月站上荣枯线房地产相...",text:"Q：快到下班时间了，公司准备聚餐的同事分成了两拨，一拨准备去吃烤肉，另一拨准备去...",text2:"",text3:"",time1:"06/01",time2:"2017"},
                {title:"美国人不敢买：60%的人认为会有另一...",text:"接地气、大气 、科技感 、XX的feel不错 、这个图还不错，就是差点感觉、我觉...",text2:"",text3:"",time1:"06/01",time2:"2017"},
                {title:"恒大地产引资395亿股价上升6%",text:"面试官：作为设计师，你有什么特长吗？",text2:"求职者：我会一些手绘",text3:"",time1:"06/01",time2:"2017"},
                {title:"中资深耕海外仓库地产市场：乘“一带一...",text:'前阵子，公司一个人遇到个记者，记者问他："看您身板硬朗、精神矍铄，请问您养生秘诀...',text2:'',text3:"",time1:"06/01",time2:"2017"},
                {title:"盘活200万亿存量物业 长效机制剑指...",text:"如果你对一个程序员说：你的代码有bug。",text2:"他的第一反应是：",text3:"",time1:"06/01",time2:"2017"},
                {title:"楼市5月不红成交遇冷购房者观望房价下...",text:"“这是一个看脸的行业”",text2:"“设计行业也有相貌歧视？”",text3:"",time1:"06/01",time2:"2017"},
                {title:"三大因素引发港内房股大涨 地产蓝筹仍...",text:"设计狮生命不能承受之重：",text2:"收藏PNG用的时候发现背景是白色、Adobe Pho...",text3:"",time1:"06/01",time2:"2017"},
                {title:"上市房地产企业资产规模增速放缓",text:"①周杰伦《不能说的秘密》",text2:"①周杰伦《不能说的秘密》",text3:"②陈奕迅《好久不见》06/01",time1:"06/01",time2:"2017"},
            ],
            arr2:[],
            num:4
        }
    },
    methods: {
        btn(){
            this.num+=4
            if(this.num>=this.arr.length){
                this.num=this.arr.length
            }
        }
    },
    created() {
        this.arr2=this.arr.slice(0,this.num)
        console.log(this.arr2);
    },
    watch:{
        'num'(){
            this.arr2=this.arr.slice(0,this.num)
            console.log(this.num)
        }
    }
}
</script>
<style scoped>
    .sory-bo{
        padding-top: 20px;
        color: #fff !important;
        position: relative;
        border-top: 1px solid rgba(255,255, 255, 0.1);
    }
    .sory-bo-po{
        position: relative;
        padding-bottom: 70px;
    }
    .sory-bo-po::after{
        content: "";
        position: absolute;
        left: 50%;
        top: 55px;
        height: calc(100% - 55px);
        width: 1px;
        background-color: #fff;
    }
    .sory-bo-btn{
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%;
        margin-left: -16px;
        cursor: pointer;
        border: solid 2px;
        border-color: #dbdbdb;
        z-index: 2;
        padding-bottom: 0;
    }
    .sory-bo-btn:hover{
        border-color: #cf372d;
    }
    .sory-bo-btn:hover span{
        opacity: 0;
        transform: rotate(45deg);
    }
    .sory-bo-btn span{
        display: block;
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: all .5s;
        position: relative;
    }
    .sory-bo-btn span::after{
        content: "";
        width: 16px;
        z-index: 2;
        height: 1px;
        background-color: #dbdbdb;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        transform: rotate(90deg);
    }
    .sory-bo-btn span::before{
        content: "";
        width: 16px;
        z-index: 2;
        height: 1px;
        background-color: #dbdbdb;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
    }
    .sory-item:nth-child(2n+1) .sory-it{
        float: left;
        width: calc(50% + 50px);
        position: relative;
        height: 110px;
        border: solid 1px transparent;
        transition: all .5s;
        
    }
  
    .sory-item:nth-child(2n) .sory-it{
        float: right;
        width: calc(50% + 50px);
        position: relative;
        height: 110px;
        border: solid 1px transparent;
        transition: all .5s;
    }
    .sory-item:nth-child(2n+1) .sory-lc{
        text-align: right;
        height: 100px;
        width: 383px;
        padding-left: 5px;
        padding-right: 50px;
        padding-top: 10px;
    }
    .sory-item:nth-child(2n) .sory-lc{
        text-align: left;
        height: 100px;
        width: 383px;
        float: right;
        padding-left: 50px;
        padding-right: 5px;
        padding-top: 10px;
       
    }
    .sory-item:nth-child(2n+1) .sory-rc{
        position: absolute;
        left: 438px;
        top: 20px;
    }
    .sory-item:nth-child(2n) .sory-rc{
        position: absolute;
        right: 478px;
        top: 20px;
    }
    .sory-rc span{
        display: block;
    }
    .sory-item .sory-it:hover{
        border-color: #fff;
    }
    .sory-item:nth-child(2n+1) .sory-it::after{
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -5px;
        right: 46px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
    .sory-item:nth-child(2n) .sory-it::after{
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -5px;
        left: 46px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
    .sory-tit{
        color: #ffffff;
        font-size: 16px;
        font-family: 微软雅黑;
        font-weight: normal;
    }
    .sory-text{
        color: #cccccc;
        font-size: 13px;
        word-break: break-all;
        font-family: 微软雅黑;
        line-height: 22px;
        padding-top: 15px;
    }
    .sory-rc span:nth-child(1){
        color: #ffffff;
        font-size: 20px;
        font-family: arial;
    }
    .sory-rc span:nth-child(2){
        color: #ffffff;
        font-size: 16px;
        font-family: arial;
    }
</style>